<template>
  <div class="settlement">
       
   <div class="income">
    <!--按钮、搜索-->
    <p class="opr">
      <el-input
              placeholder="搜索"
              v-model="queryDemand" size="mini" class="left searchIpt" @keyup.enter.native="getWithdrawflows(true)">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getWithdrawflows(true)"></i>
      </el-input>
        <el-select v-model="queryState" placeholder="提现状态" size="mini" @change='getWithdrawflows(true)'>
        <el-option label="提现状态" value=""></el-option>
        <el-option label="提现中" value="1"></el-option>
        <el-option label="已提现" value="2"></el-option>
        
      </el-select>
    </p>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              label="操作时间">
        <template slot-scope="scope">
          <p class="price" v-if="scope.row.createTime!=null">{{ scope.row.createTime | stampFormate2}}</p>
          <p class="price" v-if="scope.row.createTime==null">-</p>
        </template>
      </el-table-column>
      <el-table-column
              label="提现金额">
              <template slot-scope="scope">
                  <p>{{ scope.row.money | money}}</p>
               </template>
      </el-table-column>
      <el-table-column
              label="事件类型">
               <template slot-scope="scope">
                  <p v-if="scope.row.type==1">文章</p>
                  <p v-if="scope.row.type==2">推广</p>
               </template>
      </el-table-column>
      <el-table-column
              width = "240"
              label="需求">
              <template slot-scope="scope">
          <p class="price">{{ scope.row.demandName }}</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
      <el-table-column
              label="状态">
              <template slot-scope="scope">
                   <p v-if="scope.row.status==1">提现中</p>
                   <p v-if="scope.row.status==2">已提现</p>
               </template>
      </el-table-column>
   <!--    <el-table-column
              label="截稿日期">
        <template slot-scope="scope">
            <p>{{scope.row.endTime | stampFormate2}}</p>
        </template>
      </el-table-column> -->
      <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="details(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
    <!--弹框-->
 <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible"
            center>
     
        <!--需求信息-->
        <div class="xm-item">
             <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="86px">
                  
                   <p class="v_title">提现信息</p>
                     <el-form-item label="状态 :" prop="title" size="mini">
                     <p v-if="ruleForm.status==1">提现中</p>
                     <p v-if="ruleForm.status==2">已提现</p>
                   </el-form-item>
                     <el-form-item label="开户名 :" prop="title" size="mini">
                     <p>{{ruleForm.userName}}</p>
                   </el-form-item>
                   <el-form-item label="开户行 :" prop="title" size="mini">
                     <p>{{ruleForm.userBank}}</p>
                   </el-form-item>
                   <el-form-item label="银行账户 :" prop="title" size="mini">
                     <p>{{ruleForm.userCardNo }}</p>
                   </el-form-item>
                   <el-form-item label="开户支行 :" prop="title" size="mini">
                     <p>{{ruleForm.userSubBank}}</p>
                   </el-form-item>
                   <el-form-item label="结算金额 :" prop="title" size="mini">
                     <p>{{ruleForm.money | money}}</p>
                   </el-form-item>
                   <el-form-item label="提交时间 :" prop="title" size="mini">
                     <p>{{ruleForm.createTime | stampFormate2}}</p>
                   </el-form-item>
                 <div v-if="ruleForm.status==2">
                   <p class="v_title">付款信息</p>
                     <el-form-item label="付款银行 :" prop="title" size="mini">
                     <p>{{ruleForm.adminBank}}</p>
                   </el-form-item>
                     <el-form-item label="付款时间 :" prop="title" size="mini">
                     <p>{{ruleForm.updateTime | stampFormate2}}</p>
                   </el-form-item>
                   <el-form-item label="付款金额 :" prop="title" size="mini">
                     <p>{{(ruleForm.money - ruleForm.bankCharges) | money}}</p>
                   </el-form-item>
                   <el-form-item label="手续费 :" prop="title" size="mini">
                     <p>{{ruleForm.bankCharges | money}}</p>
                   </el-form-item>
                   <el-form-item label="备注 :" prop="title" size="mini">
                     <p>{{ruleForm.remark}}</p>
                   </el-form-item>
                   </div>
              
              <!--      <el-form-item>
                     <el-button type="primary" size="mini" @click="postWithdrawflowsapply">申请</el-button>
                     <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
                   </el-form-item> -->
                 </el-form>
        </div>
        <!--表单-->
         <div v-show="dialog.oprTyp == 1">
    
      </div>
      <div v-if="dialog.oprTyp == 2">
        <!--文章需求详情-->

      </div>
    </el-dialog>
  </div>
  



  </div>

 
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'

  export default {
    props: [],
    data () {
      return {
        // 操作区
        queryState: '', // 选择需求状态
        queryDemand: '', // 查询条件
       
        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
      
        // 弹层
        dialog: {
          title: '提现详情',
        },
         // 表单
        ruleForm: {
          name: 0,
          subBank: 0,
          money: 0,
        },
  
        centerDialogVisible: false, // 弹框
  

      }
    },
    // components: {pagination},
    mounted () {
      this.getWithdrawflows()
    },
    methods: {
      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getWithdrawflows()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getWithdrawflows()
      },
    
      //获得列表
      getWithdrawflows (type) {
        let that = this;
         if(type==true){
           that.currentPage=1
           that.pages.no=1
         }
        commonService.getWithdrawflows({pageNo: that.pages.no, pageSize:that.pages.size,queryState:that.queryState,queryDemand:that.queryDemand}).then(function (res) { 
                  if(res.data.code==200){
                     console.log(res)
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                          that.empty="暂无数据"
                  }
                  
        });
      },
      details:function(id){
          
          let that=this
          commonService.getWithdrawflowsid(id).then(function (res) { 
            console.log(res)
                  if(res.data.code==200){
                     that.ruleForm=res.data.datas
                     that.centerDialogVisible=true 

                  }
                  
        });

      },
 
 
       
       
     
  
    },
   
  }
</script>
<style lang="less">
  .settlement{
    .income{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
  .xm-item{
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier,monospace;
    font-size: 12px;
    padding: 18px 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    -webkit-font-smoothing: auto;
    display:flex;justify-content: space-between;align-items: flex-start;
    .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
      display:flex; justify-content: flex-start; align-items: center;
    .line{display:block;height: 14px;border-left:2px solid #66B0FF;float:left;margin-right: 8px;}
    }
    .p.des{min-height: 25px;font-size: 14px;color:#666;}
    .p.info{font-size: 12px; color:#999;}
    .left{ width: 95%; }
    .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
    i:hover{color:#409EFF;cursor: pointer;}
    }
    .v_title{
        border-left: 2px solid #f29700;
       padding-left: 10px;
       margin-bottom: 20px;
       font-size: 16px;
       line-height: 18px;
    }
  }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
       .el-dialog{
           width: 640px;
           max-height: 80%;
           overflow-y:auto; 
           margin: 0 auto;
       }
    }
    .el-dialog--center{
      text-align: left;
   }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
    }
      
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
           

  }
</style>